<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>穿梭框</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-alert/css/z-UI.alert.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-tab/css/z-UI.tab.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-select/css/z-UI.select.css"/>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="z-UI.js"></script>
    <script type="text/javascript" src="z-UI-alert/js/z-UI.alert.js"></script>
    <script type="text/javascript" src="z-UI-tab/js/z-UI.tab.js"></script>
    <script type="text/javascript" src="z-UI-select/js/z-UI.select.js"></script>
    <style>
		html,body{
            width: 100%;height: 100%;
            margin:0;
        }
    </style>
</head>
<body>

<div style="overflow-y: auto;box-sizing: border-box;padding: 20px;" class="zUI-full">

    <div class="zUI-list-tran" id="tran1">
        <div class="list-box">
            <div class="list-header">未显示</div>
            <ul class="left">
                <li list-tran-data="item1">item1</li>
                <li list-tran-data="item2" class="active">item2</li>
                <li list-tran-data="item3">item3</li>
                <li list-tran-data="item4">item4</li>
                <li list-tran-data="item5">item5</li>
                <li list-tran-data="item6">item6</li>
                <li list-tran-data="item7">item7</li>
                <li list-tran-data="item8">item8</li>
                <li list-tran-data="item9">item9</li>
                <li list-tran-data="item10">item10</li>
                <li list-tran-data="item11">item11</li>
                <li list-tran-data="item12">item12</li>
                <li list-tran-data="item13">item13</li>
            </ul>
        </div>
        <div class="list-box">
            <div class="list-header">已显示</div>
            <ul class="right">
                <li list-tran-data="item14">item14</li>
                <li list-tran-data="item15">item15</li>
            </ul>
        </div>
    </div>
    <br>
    <button class="zUI-btn info" onclick="zUI.dialog.alert('<pre>'+JSON.stringify(zUI.select.getListTranData('#tran1'),null,2)+'</pre>')">获得结果</button>

</div>
</body>

<script>

    zUI.select.loadListTran({
        elem:'.zUI-list-tran'
    })
</script>


</html>